<ion-item *ngIf="interface">
  <ion-icon
    slot="start"
    size="large"
    [name]="interface.def.ui ? 'desktop-outline' : 'terminal-outline'"
  ></ion-icon>
  <ion-label>
    <h1>{{ interface.def.name }}</h1>
    <h2>{{ interface.def.description }}</h2>
  </ion-label>
</ion-item>
<div *ngIf="interface" style="padding-left: 64px">
  <!-- has tor -->
  <ion-item *ngIf="interface.addresses['tor-address'] as tor">
    <ion-label>
      <h2>Tor Address</h2>
      <p>{{ tor }}</p>
    </ion-label>
    <ion-buttons slot="end">
      <ion-button *ngIf="interface.def.ui" fill="clear" (click)="launch(tor)">
        <ion-icon size="small" slot="icon-only" name="open-outline"></ion-icon>
      </ion-button>
      <ion-button fill="clear" (click)="showQR(tor)">
        <ion-icon
          size="small"
          slot="icon-only"
          name="qr-code-outline"
        ></ion-icon>
      </ion-button>
      <ion-button fill="clear" (click)="copy(tor)">
        <ion-icon size="small" slot="icon-only" name="copy-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-item>
  <!-- no tor -->
  <ion-item *ngIf="!interface.addresses['tor-address']">
    <ion-label>
      <h2>Tor Address</h2>
      <p>Service does not use a Tor Address</p>
    </ion-label>
  </ion-item>

  <!-- lan -->
  <ion-item *ngIf="interface.addresses['lan-address'] as lan">
    <ion-label>
      <h2>LAN Address</h2>
      <p>{{ lan }}</p>
    </ion-label>
    <ion-buttons slot="end">
      <ion-button *ngIf="interface.def.ui" fill="clear" (click)="launch(lan)">
        <ion-icon size="small" slot="icon-only" name="open-outline"></ion-icon>
      </ion-button>
      <ion-button fill="clear" (click)="showQR(lan)">
        <ion-icon
          size="small"
          slot="icon-only"
          name="qr-code-outline"
        ></ion-icon>
      </ion-button>
      <ion-button fill="clear" (click)="copy(lan)">
        <ion-icon size="small" slot="icon-only" name="copy-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-item>
  <!-- no lan -->
  <ion-item *ngIf="!interface.addresses['lan-address']">
    <ion-label>
      <h2>LAN Address</h2>
      <p>N/A</p>
    </ion-label>
  </ion-item>
</div>
